<template>
    <div>
        <el-row>
            <img :src="require('../../assets/yyt/img-01.jpg')">
        </el-row>
        <el-row>
            <el-steps :active="1" finish-status="success" simple style="width: 50%;margin-top:20px;margin-left:100px">
                <el-step title="1.填写号码、充值金额"></el-step>
                <el-step title="2.确认并支付"></el-step>

            </el-steps>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            充值号码: <el-input v-model="phone" placeholder="请输入11位移动手机号码" style="width: 300px;"
                @input="checkPhone"></el-input>
        </el-row>
        <el-row style="margin-top: 5px; margin-left: 200px">
            <span v-if="phone && !validPhone" style="color: red;">请输入有效的11位手机号码</span>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            充值金额:
            <el-button @click="rechargeAmount = '100'" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                10元
            </el-button>
            <el-button @click="rechargeAmount = '300'" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                30元
            </el-button>
            <el-button @click="rechargeAmount = '500'" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                50元
            </el-button>
            <el-button @click="rechargeAmount = '1000'" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                100元
            </el-button>
            <el-button @click="rechargeAmount = '2000'" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                200元
            </el-button><br>
            <el-button @click="rechargeAmount = '3000'" type="primary" plain
                style="width: 70px; height: 30px;margin-left:73px;margin-top:10px" class="centered-text-button">
                300元
            </el-button>
            <el-button @click="rechargeAmount = '4000'" type="primary" plain
                style="width: 70px; height: 30px;margin-top:10px" class="centered-text-button">
                400元
            </el-button>
            <el-button @click="rechargeAmount = '5000'" type="primary" plain
                style="width: 70px; height: 30px;margin-top:10px" class="centered-text-button">
                500元
            </el-button>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            <div style="display: flex;">
                支付积分:<div style="color: red;">{{ rechargeAmount }}</div>
            </div>
        </el-row>

        <el-row style="margin-top:50px;margin-left:400px">
            <el-button @click="startRecharge" type="primary">开始充值</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rechargeAmount: '',
            phone: '13862700450',
            validPhone: true,
            orderNum: ''
        }
    },
    methods: {
        checkPhone() {
            const phoneRegex = /^1[3-9]\d{9}$/;
            this.validPhone = phoneRegex.test(this.phone);
        },
        startRecharge() {
            if (!this.phone) {
                this.$message.error("请填写正确的手机号");
                return;
            }
            if (!this.rechargeAmount) {
                this.$message.error("请选择充值金额");
                return;
            }
            let param = {};
            param.phone = this.phone;

            param.integral = this.rechargeAmount;
            this.$axios.post('api/rabbit/addJifenRechargeOrder', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.orderNum = res.data.data
                        this.$router.push({ path: '/jifenConfirm', query: { orderNum: this.orderNum,integral: this.rechargeAmount,phone: this.phone } })
                    }
                })
        }
    },
    created() {

    }
}
</script>

<style scoped>
.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}
</style>